<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="/lib/jquery.min.js"></script>-->
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:820px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <el-page-header @back="goBack" content="">
                </el-page-header>
                <div style="width: 60%; margin-left: 22%; margin-top: 50px">
                    <template>
                        <el-form ref="nihao" :model="formData" label-width="80px">
                            <el-form-item label="单据编号" prop="isitem">
                                <el-input v-model="formData.isitem" placeholder="请填写单据编号，a201908523"></el-input>
                            </el-form-item>
                            <el-form-item label="产品名称" prop="citem">
                                <el-select defa v-model="formData.clothes.citem" placeholder="请选择入库产品" style="margin-left:-650px; width: 30%">
                                    <el-option  v-for="item in clothesList"  :label="item.cname" :value="item.citem"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数量" prop="num">
                                <el-input v-model="formData.num" placeholder="请填写产品数量，10"></el-input>
                            </el-form-item>
                            <el-form-item label="进货价" prop="price">
                                <el-input v-model="formData.price" placeholder="请填写进货价，100"></el-input>
                            </el-form-item>
                            <el-form-item label="所入仓库" prop="stockname">
                                <el-select defa v-model="formData.depot.name" placeholder="请选择仓库" style="margin-left:-650px; width: 30%" disabled>
                                    <el-option label="仓库一" value="仓库一"></el-option>
                                    <el-option label="仓库二" value="仓库二"></el-option>
                                    <el-option label="仓库三" value="仓库三"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库日期" prop="indate">
                                <el-date-picker
                                        style="margin-left:-650px; width: 30%"
                                        v-model="formData.indate"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        default-time="12:00:00">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="经办人" prop="operator">
                                <el-input v-model.number="formData.operator" placeholder="请填写经办人，王经理"></el-input>
                            </el-form-item>
                            <el-form-item label="来源" prop="source">
                                <el-radio-group v-model="formData.source" style="margin-left:-685px; width: 40%">
                                    <el-radio label="来源1"></el-radio>
                                    <el-radio label="来源2"></el-radio>
                                    <el-radio label="其它"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item style="margin-top: 50px">
                                <el-button type="primary" @click.native="addInstock()">添加</el-button>
                                <el-button @click.native="resetForm('nihao')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </div>
            </el-main>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            stockName:'',
            activeIndex: '4-1',
            account:'',
            authinstocks:[],
            clothesList:[],
            imgUrl:'',
            id:'',
            depotid:'',
            formData: {
                isitem: '',
                indate:'',
                operator: '',
                source:'',
                clothes:{citem:''},
                num:'',
                price:'',
                depot:{id:'', name:''}
            }

        },
        mounted: function () {
            this.depotid = this.getUrlSearch("depotid");
            this.formData.depot.id = this.depotid;
            this.getuser();
            this.getClothesList();
            this.getSelectDepot();
        },
        methods:{
            getSelectDepot: function(){
                var url = "depot/get/" + this.depotid;
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.formData.depot = res.data;
                    }else {
                        console.log("获取选定仓库失败");
                    }
                });
            },

            addInstock: function(){
                console.log(JSON.stringify(this.formData));
                var obj = this;
                var url = "instock/add";
                console.log("citem:" + this.formData.clothes.citem);
                axios.post(url, this.formData).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        vue.jump("instock_list_page?depotid=" + vue.depotid);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },

            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },

            handleSelect: function(key, keyPath) {
                console.log("key:" + key);
                console.log("keyPath:" + keyPath);
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
                this.activeIndex = key;
            },

            getClothesList: function(){
                var url = "clothes/clothesList";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.clothesList = res.data;
                        console.log("clothesList:" + JSON.stringify(vue.clothesList))
                    }else {
                        console.log(res.msg);
                    }
                })
            },

            //表单
            submitForm: function(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm: function(formName) {
                this.$refs[formName].resetFields();
            },
            //通过正则表达式获取地址栏参数
            getUrlSearch: function(name) {
                // 未传参，返回空
                if (!name) return null;
                // 查询参数：先通过search取值，如果取不到就通过hash来取
                var after = window.location.search;
                after = after.substr(1) || window.location.hash.split('?')[1];
                // 地址栏URL没有查询参数，返回空
                if (!after) return null;
                // 如果查询参数中没有"name"，返回空
                if (after.indexOf(name) === -1) return null;

                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                // 当地址栏参数存在中文时，需要解码，不然会乱码
                var r = decodeURI(after).match(reg);
                // 如果url中"name"没有值，返回空
                if (!r) return null;

                return r[2];
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },
            goBack() {
                history.back();
            }


        }
    })
</script>
</body>
</html>